<template>
	<view class="body">
		<image :src="Info.content" mode="" class="header"></image>
		<view class="first_box">
			<view class="title-box">
				<view class="gang">
				</view>
				<view class="size">
					核销类型
				</view>
			</view>
			<view class="row-box">
				<view v-for="(item,index) in Info.verify" :key="index" class="item" :class="{
					  'mr': (index + 1) % 3 !== 0,
					  'active': activeIndex === index
					}" @click="changeActive(index)">
					<image :src="item.icon" mode="aspectFit" class="uimg"></image>
					<view class="size">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="title-box">
				<view class="left">
					<view class="gang">
					</view>
					<view class="size">
						核销码
					</view>
				</view>
				<view class="right">
					<view class="size" @click="$ROUTELINK('CDKEYHistory1')">
						核销记录
					</view>
					<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
				</view>
			</view>
			<u-input v-model="goods_Query.code" type="text" :border="false" :custom-style="customStyle" placeholder="请输入核销码"
				placeholder-style="fontSize: 32rpx;color: #999999;fontWeight: 500," input-align="center" :clearable="false" />
			<button class="btn" @click.stop="open" :disabled="!goods_Query.code"
				:style="!goods_Query.code ? 'opacity: 0.6;' : ''">
				确认核销
			</button>
		</view>
		<view class="seacoud_box">
			<view class="title-box">
				<view class="gang">
				</view>
				<view class="size">
					核销方式
				</view>
			</view>
			<view class="navBox">
				<view class="navIndicator" :style="{ left: indicatorLeft, width: indicatorWidth }"></view>
				<view v-for="(item,index) in Info.verify" :key="index" class="nav_Item mrr" :class="{
					  'nav_active': activeIndex === index
					}" @click="changeActive(index)">
					{{item.title}}
				</view>
			</view>
			<view class="contentBox">
				<u-parse :html="Info.verify[activeIndex].process"></u-parse>
			</view>
		</view>
		<popupVue :couponShow="cardShow" title="核销商品"
			:btnSize="goods_Info.type == 'card'|| goods_Info.type == 'recruit'?'确认核销':'下一步'" @close="cardShow = false"
			@sure="changeCard">
			<view class="comlum_shop">
				<view class="rows">
					<view class="left">
						商品名称
					</view>
					<view class="right">
						{{goods_Info.name}}
					</view>
				</view>
				<view class="rows">
					<view class="left">
						类型
					</view>
					<view class="right">
						{{goods_Info.type_str}}
					</view>
				</view>
				<!-- 课程协议 -->
				<view class="xieyi_no" v-if="goods_Info.type == 'course'">
					<view>
						<image :src="$IMG_URL('/static/newVersion/agreement2.png')" mode="" class="icon"></image>
						<text class="size1">我已阅读并同意:</text>
					</view>
					<view class="tol">
						<text class="size2" @click="routeAreement">《优机小羊课程购买协议》、</text>
						<text class="size2" @click="routeGzAreement">《优机小羊会员守则》、</text>
						<text class="size2" @click="routeShAreement">《优机小羊私教售后规则》</text>
					</view>
				</view>
				<!-- 会员卡协议 -->
				<view class="xieyi_no" v-if="goods_Info.type == 'card'">
					<view>
						<image :src="$IMG_URL('/static/newVersion/agreement2.png')" mode="" class="icon"></image>
						<text class="size1">我已阅读并同意:</text>
					</view>
					<view class="tol">
						<text class="size2" @click="routeAreement">《优机小羊会员卡购买协议》、</text>
						<text class="size2" @click="routeSzAreement">《优机小羊会员守则》、</text>
						<text class="size2" @click="routeSHAreement">《优机小羊会员卡售后规则》</text>
					</view>
				</view>
			</view>
		</popupVue>
		<popupVue :couponShow="shopShow" title="请选择主门店" :btnSize="shopBtnSize" @close="shopShow = false"
			@sure="changShopClose">
			<view class="search">
				<u-search placeholder="搜索门店" :show-action="false" class="search-input" v-model="query.search"
					@change="searchShop"></u-search>
			</view>
			<scroll-view scroll-y="true" style="height: 860rpx" @scrolltolower="scrolltolower">
				<view class="comlum_box">
					<view v-for="(item,index) in FieldList" :key="index" class=""
						:class="shopActiveIndex == index ?'active_item':'item_box'" @click="changeActiveIndex(index)">
						<image :src="item.image" mode="aspectFill" class="tag-img"></image>
						<view class="title">
							{{item.name}}
						</view>
						<view class="flex">
						</view>
						<view class="right">
							{{item.distance}}
						</view>
					</view>
				</view>
			</scroll-view>
		</popupVue>
		<popupVue title="选择教练" @close="skilledClose" @sure="skilledSure" :couponShow="skilledShow" :btnShow="false"
			:btnTwoShow="true" upSize="上一步" downSize="确认核销" @up="skillUp" @down="skillDown">
			<view class="comlum_Y2">
				<scroll-view scroll-y="true" class="scroll-Y3">
					<view class="scroll-Y4">
						<view v-for="(item,index) in coach_list" :key="index" class="item"
							:style="{border: coachIndex == index ?'2rpx solid #73F0EA':'2rpx solid #ffffff'}"
							@click.stop="changeCoach(item, index)">
							<image :src="$IMG_URL('/static/shop/recommend.png')" mode="aspectFit" class="recommend">
							</image>
							<image :src="item.avatar" mode="aspectFill" class="Coach-profile-picture"></image>
							<view class="right_comlumn">
								<view class="name">
									{{item.nickname}}
								</view>
								<view class="grade-box">
									<view class="grade">
										{{item.serve}}分
									</view>
									<view class="dashed-box">

									</view>
									<view class="good-reputation">
										好评率{{item.vea}}
									</view>
								</view>
								<view class="scound-box">
									<view class="one_box">
										<text class="size1 row1">证书</text>
										<text class="size2 row1">{{item.cert_num}}</text>
										<text class="size1 row1">本</text>
										<view class="dashed-box">

										</view>
										<view class="one_box">
											<text class="size1 row1">上课</text>
											<text class="size2 row1">{{item.course_num}}</text>
											<text class="size1 row1">节</text>
										</view>
									</view>
									<view class="bottom">
										<view v-for="(skillItem,skillIndex) in item.domain_list" :key="skillIndex" class="skillItem">
											{{skillItem.title}}
										</view>
									</view>
								</view>
								<view class="content">
									{{item.bio}}
								</view>
							</view>
						</view>
						<view style="width: 702rpx; height: 70rpx;"></view>
					</view>
				</scroll-view>
			</view>
		</popupVue>
		<popupVue title="核销成功" :couponShow="suredShow" :btnShow="false" :btnTwoShow="true"
			:upSize="overQuery.form == 'card' ? '查看卡包' : '查看课程'" downSize="确认" @up="skillSureUp" @down="skillSureDown"
			@close="suredShow = false">
			<view class="sureBox">
				<image :src="$IMG_URL('/static/ck/sure.png')" mode="aspectFit" class="sure"></image>
				<view class="size_s">
					核销成功
				</view>
				<view class="remark">
					<text>可返回上一页在</text>
					<text>【{{overQuery.form == 'card' ?'卡包':'课程'}}】中查看核销内容</text>
				</view>
			</view>
		</popupVue>
		<popupVue title="温馨提示" :couponShow="toastShow" :btnShow="false" :btnTwoShow="false" @close="toastShow = false">
			<view class="comlum_tap">
				<view class="toast_top">
					<view class="row-box">
						<u-icon name="error-circle" color="#EC8B3F" size="40"></u-icon>
						<view class="size">
							{{overQuery.notice.title}}
						</view>
					</view>
				</view>
				<view class="toast_bottom">
					<view class="coach_box">
						<view class="img_box">
							<image v-if="overQuery.notice.content.avatar" :src="overQuery.notice.content.avatar" mode="aspectFill"
								class="imgs"></image>
							<view class="tag">
								店长
							</view>
						</view>
						<view class="coach_right">
							<view v-if="overQuery.notice.content.name" class="name">
								{{overQuery.notice.content.name}}
							</view>
							<view class="phone_box">
								<image :src="$IMG_URL('/static/test/phone.png')" mode="aspectFill" class="phone_logo"></image>
								<view class="phone_numnber">
									{{overQuery.notice.content.mobile}}
								</view>
							</view>
						</view>
						<view class="btn" @click.stop="opentelephoneShow(overQuery.notice.content.mobile)">
							拨打
						</view>
					</view>
					<image :src="overQuery.notice.content.qrcode" mode="" class="images"></image>
					<view class="size2">
						长按识别添加店长微信
					</view>
				</view>
			</view>
		</popupVue>
		<!-- 确认招募弹框 -->
		<popupVue title="温馨提示" :height="overQuery.status == '3' ? '600rpx' : '750rpx'" :couponShow="zhaomuShow"
			:btnShow="false" :btnTwoShow="false" @close="zhaomuShow = false">
			<view class="comlum_tap">
				<view class="toast_top">
					<view class="row-box">
						<u-icon name="error-circle" color="#EC8B3F" size="40"></u-icon>
						<view class="size">
							{{overQuery.notice.title}}
						</view>
					</view>
				</view>
				<view class="toast_bottom">
					<view class="coach_box">
						<view class="coach_right">
							<view v-if="overQuery.notice.content.name" class="name">
								{{overQuery.notice.content.name}}
							</view>
							<view class="phone_box">
								<image :src="$IMG_URL('/static/test/phone.png')" mode="aspectFill" class="phone_logo"></image>
								<view class="phone_numnber">
									{{overQuery.notice.content.mobile}}
								</view>
							</view>
						</view>
						<view class="btn" @click.stop="opentelephoneShow(overQuery.notice.content.mobile)">
							拨打
						</view>
					</view>
				</view>
			</view>
		</popupVue>
		<!--  -->
		<u-toast ref="uToast" />
		<telephone :telephoneShow="telephoneShow" :telephone="mobileNumber" @cancel="callCancel" @sure="callSure">
		</telephone>
	</view>
</template>

<script>
	import popupVue from '@/components/popup.vue';
	import telephone from '@/components/telephone.vue'
	import {
		groupverifyMain,
		goods_detail,
		storeList,
		verify_coupon
	} from '@/api/user'
	import {
		coach
	} from '@/api/shop'
	export default {
		components: {
			popupVue,
			telephone,
		},
		data() {
			return {
				zhaomuShow: false,
				toastShow: false,
				suredShow: false,
				skilledShow: false,
				coachIndex: null,
				query: {
					page: 1,
					type: '',
					search: ''
				},
				// 列表总页数
				allPage: 1,
				FieldList: [],
				cardShow: false,
				shopShow: false,
				skilledShow: false,
				// s商品
				goods_Query: {
					type: '',
					shop_id: '',
					code: ''
				},
				coachQuery: {
					shop_id: '',
					page: ''
				},
				coach_list: [],
				// 商品类型
				goods_Info: {},
				shopActiveIndex: 0,
				Info: {},
				activeIndex: 0,
				code: '',
				customStyle: {
					width: '654rpx',
					height: '92rpx',
					background: '#f6f6f6',
					borderRadius: '16rpx'
				},
				overQuery: {},
				mobileNumber: '',
				// 电话弹窗
				telephoneShow: false,
				telephoneNumber: '',
				// 导航指示器位置
				indicatorLeft: '0rpx',
				indicatorWidth: '80rpx',
				requestTask: null, //中断请求的
			}
		},
		computed: {
			shopBtnSize() {
				return this.goods_Info.type == 'card' ? '确认核销' : '下一步'
			}
		},
		created() {
			this.getGroupverifyMain()
		},
		onShow() {
			this.getLocation()
		},
		mounted() {
			// 初始化导航指示器位置
			this.updateIndicatorPosition();

			// 监听窗口大小变化
			if (typeof window !== 'undefined') {
				window.addEventListener('resize', this.updateIndicatorPosition);
			}
		},

		beforeDestroy() {
			// 移除事件监听器
			if (typeof window !== 'undefined') {
				window.removeEventListener('resize', this.updateIndicatorPosition);
			}
		},
		methods: {
			// 更新导航指示器位置
			updateIndicatorPosition() {
				// 在uni-app中使用createSelectorQuery来获取元素位置
				this.$nextTick(() => {
					try {
						const query = uni.createSelectorQuery().in(this);
						query.select('.nav_active').boundingClientRect(data => {
							if (data) {
								// 获取父容器的宽度来计算相对位置
								query.select('.navBox').boundingClientRect(parentData => {
									if (parentData) {
										this.indicatorLeft = (data.left - parentData.left) + 'px';
										this.indicatorWidth = data.width + 'px';
									}
								}).exec();
							}
						}).exec();
					} catch (error) {
						console.error('更新导航指示器位置时出错:', error);
					}
				});
			},

			// 会员卡协议跳转
			// 三个协议跳转规则
			routeSzAreement() {
				uni.navigateTo({
					url: '/pageA/agreement/member?form=' + 'cardrule'
				})
			},
			routeAreement() {
				uni.navigateTo({
					url: '/pageA/agreement/member?form=' + 'member'
				})
			},
			routeSHAreement() {
				uni.navigateTo({
					url: '/pageA/agreement/member?form=' + 'cardprocess'
				})
			},

			// 重写 changeActive 
			// changeActive(index) {
			// 	console.log('111');
			// 	this.activeIndex = index;
			// 	this.updateIndicatorPosition();
			// 	// 切换核销类型之后重置page、FieldList
			// 	this.query.page = 1
			// 	this.FieldList = []

			// },
			changeActive(index) {
				this.activeIndex = index;
				this.updateIndicatorPosition();

				// 中断旧请求
				if (this.requestTask) {
					this.requestTask.abort();
					this.requestTask = null;
				}
				// 重置列表和页码
				this.query.page = 1;
				this.FieldList = [];
			},
			callSure() {
				let that = this
				uni.makePhoneCall({
					phoneNumber: that.mobileNumber, // 必填，需要拨打的电话号码
					success: function() {
						console.log('拨打电话成功！');
						// 这里可以添加拨打成功后的逻辑，比如提示用户
					},
					fail: function(err) {
						console.log('拨打电话失败：', err);
						// 这里可以添加拨打失败后的逻辑，比如提示用户错误原因
					}
				});
				this.telephoneShow = false
			},
			callCancel() {
				this.telephoneShow = false
			},
			opentelephoneShow(item) {
				this.telephoneShow = true
				this.mobileNumber = item
			},
			// 获取经纬度
			getLocation() {
				console.log('321');
				let that = this;
				uni.getLocation({
					type: "gcj02", //gcj02 wgs84
					success(res) {
						console.log('resgetLocation', res);
						const {
							latitude,
							longitude
						} = res
						console.log("getLocation", res);
						uni.setStorageSync('lat', latitude);
						uni.setStorageSync('long', longitude);
						that.FieldList = []
						that.query.page = 1
						that.getshopList()
					},
					fail: (err) => {
						console.log('err', err);
					},
				});
			},
			changeCoach(item, index) {
				console.log('选择教练', index);
				if (this.coachIndex == index) {
					this.coachIndex = null
				} else {
					this.coachIndex = index
				}

			},
			getCoach() {
				coach(this.coachQuery).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						const list = []
						this.status = 'loading'
						if (this.coachQuery.page > res.data.all_page) {
							console.log('nomore');
							this.status = 'nomore'
							return false
						} else {
							console.log('more');
							this.status = 'more'
							this.coach_list = this.coach_list.concat(res.data.coach_list)
						}

						console.log('list', this.coach_list);
					}
				})
			},
			open() {
				// console.log(this.goods_Query.code)
				this.goods_Query.type = this.Info.verify[this.activeIndex].value
				console.log('this.goods_Query.type', this.goods_Query.type);
				this.query.type = this.Info.verify[this.activeIndex].value
				if (this.goods_Query.code) {
					// console.log(this.goods_Query.type)
					if (this.goods_Query.type == 'redeem') {
						this.getVerify_coupon()
					} else {
						this.getshopList()
						this.shopShow = true
					}

				}
			},
			getGoods_detail() {
				console.log('goods_Query', this.goods_Query);
				goods_detail(this.goods_Query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.goods_Info = res.data.info
						if (this.goods_Info.type == 'course') {
							this.shopShow = false
							this.getCoach()
							this.cardShow = true
							// this.skilledShow = true

						} else {
							this.shopShow = false
							this.cardShow = true
						}
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							icon: false,
						})
					}
				})
			},
			getGroupverifyMain() {
				groupverifyMain().then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.Info = res.data
					}
				})
			},
			skillSureUp() {
				uni.redirectTo({
					url: this.overQuery.form == 'card' ? '/pageB/user/cardBag' : '/pageB/user/course'
				})
				this.suredShow = false
			},
			skillSureDown() {
				this.goods_Query.code = ''
				this.suredShow = false
			},
			changShopClose() {
				this.goods_Query.shop_id = this.FieldList[this.shopActiveIndex].id
				this.coachQuery.shop_id = this.FieldList[this.shopActiveIndex].id
				this.getGoods_detail()

			},
			getVerify_coupon() {
				const obj = {
					type: this.goods_Query.type,
					code: this.goods_Query.code,
					...(this.goods_Query.type !== 'redeem' && {
						shop_id: this.goods_Query.shop_id
					}),
					...(this.goods_Info.type === 'course' && {
						coach_id: this.coach_list[this.coachIndex].coach_id
					})
				};

				verify_coupon(obj).then(({
					data: res
				}) => {
					// console.log('res', res);
					if (res.code == 1) {
						this.overQuery = res.data
						// console.log(this.overQuery.status)
						this.skilledShow = false
						if (res.data.status == 1) {
							this.suredShow = true
						} else if (res.data.status == 2) {
							this.goods_Query.code = ''
							this.toastShow = true
						} else if (res.data.status == 3) {
							this.goods_Query.code = ''
							this.zhaomuShow = true
						}

					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							icon: false,
						})
					}
				})
			},
			skillDown() {
				this.getVerify_coupon()

			},
			skillUp() {
				this.skilledShow = false
				this.shopShow = true
			},
			skilledSure() {
				this.skilledShow = false
			},
			skilledClose() {
				this.coachIndex = null
				this.skilledShow = false
			},
			changeActiveIndex(index) {
				console.log(index, 'index');
				this.shopActiveIndex = index

			},
			// getshopList() {
			// 	storeList(this.query).then(({
			// 		data: res
			// 	}) => {
			// 		console.log('res', res);
			// 		if (res.code == 1) {
			// 			const list = []
			// 			this.status = 'loading'
			// 			this.allPage = res.data.all_page
			// 			if (this.query.page > this.allPage) {
			// 				// console.log('nomore');
			// 				this.status = 'nomore'
			// 				return false
			// 			} else {
			// 				// console.log('more');
			// 				this.status = 'more'
			// 				this.FieldList = this.FieldList.concat(res.data.list)
			// 			}

			// 			// console.log('list', this.FieldList);
			// 		}
			// 	})
			// },
			getshopList() {
				if (this.requestTask) {
					this.requestTask.abort(); // 中断请求
					this.requestTask = null; // 重置
				}
				this.requestTask = storeList(this.query).then(({
					data: res
				}) => {
					this.requestTask = null;
					console.log('接口返回数据:', res);
					if (res.code == 1) {
						this.status = 'loading';
						this.allPage = res.data.all_page || 1;
						const newList = res.data.list || [];

						// 第1页直接覆盖，避免重复
						if (this.query.page === 1) {
							this.FieldList = newList;
						} else {
							this.FieldList = this.FieldList.concat(newList);
						}

						this.status = this.query.page >= this.allPage ? 'nomore' : 'more';
						console.log('最后的数据列表', this.FieldList)
					}
				}).catch(err => {
					// 重置任务对象（忽略中断导致的错误）
					this.requestTask = null;
					console.error('接口请求失败:', err);
				});
			},
			// scrolltolower() {
			// 	// this.query.page++
			// 	// 1. 若已标记无更多数据，直接返回（不再请求）
			// 	// if (this.status === 'nomore') {
			// 	// 	console.log('已无更多数据，停止请求');
			// 	// 	return;
			// 	// }

			// 	// if (this.status === 'nomore') {

			// 	// 	return false
			// 	// }
			// 	// this.getshopList()

			// 	if (this.query.page >= this.allPage) {
			// 		this.status = 'nomore'
			// 		return
			// 	}
			// 	if (this.query.page <= this.allPage) {
			// 		this.getshopList()
			// 	}
			// 	this.query.page++
			// },
			scrolltolower() {
				// 1. 若已无更多数据，直接返回
				if (this.status === 'nomore') {
					return;
				}
				if (this.query.page >= this.allPage) {
					this.status = 'nomore';
					// console.log('页码已达最大页数，停止请求');
					return;
				}
				this.query.page++;
				// 4. 发起请求
				this.getshopList();
			},
			searchShop() {
				this.query.page = 1
				this.FieldList = []
				this.getshopList()
			},

			changeCard() {
				console.log('type', this.goods_Info.type)
				if (this.goods_Info.type == 'card' || this.goods_Info.type == 'recruit') {
					this.cardShow = false
					this.getVerify_coupon()
				} else {
					this.cardShow = false
					this.skilledShow = true
				}
			}
		}
	}
</script>

<style lang="scss">
	.xieyi_no {
		// position: relative;
		// top: 510rpx;
		padding-top: 500rpx;

		.icon {
			width: 24rpx;
			height: 24rpx;
			margin-right: 8rpx;

		}

		.size1 {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #333333;
		}

		.size2 {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #73F0EA;
		}

		.tol {
			// display: flex;
			// flex-wrap: wrap;
			// gap: 8rpx;
			margin-top: 10rpx;
		}
	}

	.comlum_tap {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.toast_top {
			width: 654rpx;
			height: 150rpx;
			border-bottom: 1rpx solid #e9e9e9;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.row-box {
				display: flex;
				flex-direction: row;
				align-items: center;

				.size {
					margin-left: 10rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #666666;
				}
			}
		}


		.toast_bottom {
			width: 654rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 66rpx;

			.coach_box {
				width: 654rpx;
				padding: 0 8rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.img_box {
					width: 92rpx;
					height: 92rpx;
					position: relative;
					margin-right: 20rpx;

					.imgs {
						width: 92rpx;
						height: 92rpx;
						background: rgba(0, 0, 0, 0.00);
						border-radius: 50%;
					}

					.tag {
						position: absolute;
						left: 50%;
						bottom: -10%;
						transform: translate(-50%, 0);
						width: 60rpx;
						height: 36rpx;
						background: #73F0EA;
						border-radius: 8rpx;
						font-size: 22rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #ffffff;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.coach_right {
					display: flex;
					flex-direction: column;
					flex: 1;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						margin-bottom: 12rpx;
					}

					.phone_box {
						display: flex;
						flex-direction: row;
						align-items: center;
						flex: 1;

						.phone_logo {
							width: 20rpx;
							height: 30rpx;
							margin-right: 7rpx;
						}

						.phone_numnber {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #666666;
						}
					}

				}

				.btn {
					transform: rotateZ(360deg);
					width: 112rpx;
					height: 64rpx;
					border: 1rpx solid #73F0EA;
					border-radius: 16rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: center;
					color: #73F0EA;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.images {
				margin-top: 72rpx;
				width: 298rpx;
				height: 298rpx;
				background: #f6f6f6;
				border-radius: 16rpx;
			}

			.size2 {
				margin-top: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #666666;
				letter-spacing: 0.62rpx;
			}
		}

	}



	.sureBox {
		display: flex;
		flex-direction: column;
		align-items: center;

		.sure {
			margin-top: 212rpx;
			width: 172rpx;
			height: 172rpx;
		}

		.size_s {
			margin-top: 32rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #73F0EA;
		}

		.remark {
			width: 344rpx;
			height: 80rpx;
			border: 2rpx solid rgba(0, 0, 0, 0.00);
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #666666;
			letter-spacing: 0.62rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	.search {
		width: 100%;
		padding: 0 24rpx;
	}

	.comlum_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 24rpx;
		padding-bottom: 100rpx;

		.active_item {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 88rpx;
			background: rgba(129, 202, 197, 0.20);
			border: 2rpx solid #73F0EA;
			border-radius: 16rpx;
			padding: 0 32rpx;
			margin-bottom: 24rpx;
		}

		.item_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 88rpx;
			background: #f6f6f6;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			padding: 0 32rpx;
			border: 2rpx solid #f6f6f6;

		}

		.tag-img {
			width: 106rpx;
			height: 32rpx;
			margin-right: 12rpx;
		}

		.title {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #333333;
			margin-right: 10rpx;
		}

		.tag_box {
			width: 52rpx;
			height: 30rpx;
			background: #f6f6f6;
			border-radius: 4rpx;
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.flex {
			flex: 1;
		}

		.right {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: right;
			color: #666666;
		}
	}

	.active {
		background: rgba(129, 202, 197, 0.20) !important;
		border: 2rpx solid #73F0EA !important;
		width: 208rpx;
		height: 94rpx;
		border-radius: 16rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	page {
		background: #e9e9e9;
	}

	.title-box {
		margin-top: 8rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 24rpx;

		.left {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.gang {
			width: 6rpx;
			height: 24rpx;
			background: #73F0EA;
			margin-right: 10rpx;
		}

		.size {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #000000;
		}

		.right {
			display: flex;
			flex-direction: row;
			align-items: center;

			.size {
				margin-right: 11rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #999999;
			}
		}
	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;

		.header {
			width: 750rpx;
			height: 274rpx;
		}

		.first_box {
			margin-top: -42rpx;
			z-index: 99;
			width: 702rpx;
			height: 544rpx;
			background: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(199, 205, 179, 0.15);
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 24rpx;



			.row-box {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-self: self-start;
				width: 100%;
				margin-bottom: 48rpx;

				.mr {
					margin-right: 12rpx;
				}



				.item {
					width: 208rpx;
					height: 94rpx;
					background: #f6f6f6;
					border-radius: 16rpx;
					border: 2rpx solid #f6f6f6;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					.uimg {
						width: 48rpx;
						height: 48rpx;
						margin-right: 20rpx;
					}

					.size {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: right;
						color: #000000;
					}
				}
			}

			.btn {
				// position: absolute;
				margin-top: 24rpx;
				width: 654rpx;
				height: 92rpx;
				background: #73F0EA;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				border: none;
			}
		}

		.seacoud_box {
			padding: 24rpx;
			margin: 24rpx 0;
			width: 702rpx;
			background: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(199, 205, 179, 0.15);
			display: flex;
			flex-direction: column;

			.navBox {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;
				margin-bottom: 30rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #e9e9e9;

				.mrr {
					margin-right: 48rpx;
				}

				.navIndicator {
					position: absolute;
					bottom: -2rpx;
					height: 6rpx;
					background: #73F0EA;
					border-radius: 3rpx;
					transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
				}

				.nav_Item {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #666666;
					display: flex;
					flex-direction: column;
					align-items: center;
					height: 56rpx;
					padding: 0 10rpx;
					position: relative;
					transition: all 0.2s ease;
					cursor: pointer;
					white-space: nowrap;

					&:active {
						transform: scale(0.95);
					}
				}

				.nav_active {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #73F0EA;
				}
			}

			.contentBox {
				flex: 1;
				min-height: 300rpx;
				padding: 20rpx 10rpx;
				line-height: 1.6;

				/* 添加默认的文本样式 */
			}
		}
	}

	.comlum_shop {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 28rpx 40rpx 0;

		.rows {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 40rpx;

			.left {
				flex: 1;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #000000;
			}

			.right {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: right;
				color: #000000;
			}
		}
	}

	.comlum_Y2 {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;


		.item2 {
			width: 702rpx;
			height: 372rpx;
		}

		.scroll-Y3 {
			width: 100%;
			height: 60vh;
			background: #e9e9e9;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 20rpx;

			.scroll-Y4 {
				width: 100%;
				background: #e9e9e9;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.item {
				margin-bottom: 20rpx;
				width: 702rpx;
				height: 352rpx;
				background: #ffffff;
				border-radius: 16rpx;
				position: relative;
				padding: 20rpx;
				border: 2rpx solid #ffffff;
				display: flex;
				flex-direction: row;

				.Coach-profile-picture {
					width: 234rpx;
					height: 310rpx;
					background: rgba(0, 0, 0, 0.00);
					border-radius: 16rpx;
					margin-right: 20rpx;
				}

				.recommend {
					position: absolute;
					top: 0;
					right: 0;
					width: 136rpx;
					height: 38rpx;

				}

				.right_comlumn {
					display: flex;
					flex-direction: column;
					width: 408rpx;

					.name {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						margin-bottom: 4rpx;
					}

					.grade-box {
						padding-bottom: 10rpx;
						width: 100%;
						border-bottom: 1rpx dashed #e9e9e9;
						display: flex;
						flex-direction: row;
						align-items: center;

						.grade {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #f37364;
						}

						.good-reputation {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #666666;
						}
					}

					.scound-box {
						display: flex;
						flex-direction: column;
						width: 100%;
						padding: 16rpx 0 14rpx;
						border-bottom: 1rpx dashed #e9e9e9;

						.one_box {
							display: flex;
							flex-direction: row;
							align-items: center;

							// 虚线
							.dashed-box {
								width: 0rpx;
								height: 28rpx;
								border: 1rpx solid #e9e9e9;
								margin: 0 11rpx;
							}

							.row1 {
								font-size: 24rpx;
								font-weight: 500;
								color: #333333;

							}

							.size1 {
								color: #333333;
							}

							.size2 {
								color: #73F0EA;
							}
						}

						.bottom {
							margin-top: 10rpx;
							display: flex;
							flex-direction: row;
							align-items: center;

							.skillItem {
								padding: 0 4rpx;
								height: 28rpx;
								background: #f6f6f6;
								border-radius: 4rpx;
								margin-right: 6rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 20rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #666666;
							}
						}
					}

					.content {
						padding-top: 14rpx;
						width: 100%;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #666666;
						overflow: hidden;
						/* 确保内容超出容器时会被隐藏 */
						display: -webkit-box;
						/* 使用WebKit的缩放盒模型 */
						-webkit-box-orient: vertical;
						/* 设置盒子的方向为垂直 */
						-webkit-line-clamp: 3;
						text-overflow: ellipsis;
						/* 多行时显示省略符号 */
						white-space: normal;
						/* 使用正常的白空格处理方式 */
					}
				}

				.recommend {
					position: absolute;
					top: 0;
					right: 0;
					width: 136rpx;
					height: 38rpx;
					z-index: 99;

				}

			}
		}
	}
</style>